<template>
  <view class="e-divination-card main-card">
    <view class="flex col-center row-between">
      <view class="font-24 text-999">
        <view style="text-decoration: underline;" @click="handleCopyOrderSn(orderItem.order_sn)">{{orderItem.order_sn}}</view>
      </view>
      <view class="order-tag tag-wait" v-if="orderItem.status == 1">待付款</view>
      <view class="order-tag tag-success" v-if="orderItem.status == 2">已完成</view>
      <view class="order-tag tag-cancel" v-if="orderItem.status == 3">已取消</view>
    </view>
    <view class="hidden_two pingfang-heavy font-28 m-t-10">{{orderItem.question}}</view>
    <view class="flex col-center row-between m-t-34">
      <view>
        <view class="flex col-bottom pingfang-heavy" style="color: #E73100" v-if="orderItem.pay_way == 'coin'">
          <view class="font-38 text-bold">{{orderItem.pay_coin}}</view>
          <view class="font-24" style="line-height: 42rpx">易币</view>
        </view>
        <view class="flex col-bottom pingfang-heavy" style="color: #E73100" v-else>
          <view class="font-24" style="line-height: 42rpx">￥</view>
          <view class="font-38 text-bold">{{orderItem.pay_money}}</view>
        </view>
        <view class="font-22 text-999">{{$u.timeFormat(orderItem.create_time, 'yyyy-mm-dd hh:MM:ss')}}</view>
      </view>
      <view class="button-group">
        <template>
          <view class="cancel-btn" v-if="orderItem.status == 1">
            <u-button size="mini" text="取消订单" color="#E5E5E5" @click="handleCloseOrder"></u-button>
          </view>
          <view class="m-l-20">
            <u-button size="mini" plain text="查看详情" color="#1F66FF" @click="handleToOderDetail"></u-button>
          </view>
          <view class="m-l-20" v-if="orderItem.status == 1">
            <u-button size="mini" text="立即付款" color="#1F66FF" @click="handlePayOrder"></u-button>
          </view>
        </template>
      </view>
    </view>
    <!-- 支付方式弹窗 -->
    <e-pay-type-popup ref="payTypeRef" @choose="handleChoosePayType"></e-pay-type-popup>
    <!--  确认支付弹窗  -->
    <e-pay-popup ref="payPopupRef" @paySuccess="handlePayResult"></e-pay-popup>
  </view>
</template>
<script>
export default {
  name: "e-divination-card",
  props:{
    type:{
      type:String | Number,
      default: 0
    },
    orderItem: {
      type: Object,
      default: ()=>({})
    }
  },
  data(){
    return {
    }
  },
  mounted() {

  },
  methods: {
    handleCloseOrder(){
      uni.showModal({
        title: "提示",
        content: "确定取消订单?",
        success: async res => {
          if(res.confirm){
            const result = await this.$api.cancel_order({ order_id: this.orderItem.id });
            if(result.code === 1) {
              uni.showToast({
                title: "取消成功",
                icon: "success",
                success: () => {
                  setTimeout(()=>{
                    this.$emit("refresh");
                  },500)
                }
              });
            }
          }
        }
      })
    },
    handlePayOrder(){
      this.$refs.payTypeRef.handleShowPayTypePopup(this.orderItem);
    },
    handleToOderDetail(){
      uni.navigateTo({
        url: "/pages/mine/divinationOrder/orderDetail/orderDetail?id=" + this.orderItem.id
      })
    },
    // 点击复制订单号
    handleCopyOrderSn(value){
      uni.setClipboardData({
        data: value,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      })
    },

    // 组件中选择支付方式
    handleChoosePayType(val){
      console.log("组件中选择支付方式", val);
      let data = {
        payType: val,  // 易币还是微信支付
        payWay: "order" // 支付类型
      }
      this.$refs.payPopupRef.handleShowPayPopup(this.orderItem, data);
    },
    // 支付结果
    handlePayResult(){
      this.$emit("refresh");
      if(this.orderItem.type !== "recharge"){
        uni.navigateTo({
          url: "/pagesAugur/result/result"
        })
      }
    }
  },
  options: {
    styleIsolation: 'shared'
  }
}
</script>
<style scoped lang="scss">
  .e-divination-card{
    padding: 30rpx;
    margin-bottom: 30rpx;
    .order-tag{
      padding: 10rpx 18rpx;
      border-radius: 10rpx;
      font-size: 24rpx;
    }
    .tag-wait{
      color: #de0922;
      background-color: #f8f1f1;
    }
    .tag-success{
      color: #1F66FF;
      background-color: #F0F6FF;
    }
    .tag-cancel{
      color: #999999;
      background-color: #F0F6FF;
    }
    .button-group{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .cancel-btn{
        /deep/ .u-button:first-child{
          color: #333 !important;
        }
      }
      /deep/ .u-button + .u-button{
        margin-left: 22rpx;
      }
      /deep/ .u-button{
        height: 50rpx;
        font-size: 26rpx;
        border-radius: 10rpx;
      }
    }

  }
</style>